<template>
  <div class="pbox">
    <Box title="井下人员">
      <template #topRight>
        <div class="rightBtn">
          <BaseButton
            v-for="item in btnArr"
            :checked="item.checked"
            @click="btnFn(item)"
            >{{ item.text }}</BaseButton
          >
        </div>
      </template>
      <div class="charts">
        <baseEchart :option="option"></baseEchart>
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";
import BaseButton from "@/components/Button/index.vue";
import baseEchart from "@/components/Echart/index.vue";
import { getJXRY } from "@/api/home";
import { reactive, onMounted, ref } from "vue";
import * as echarts from "echarts";
const sourceData = ref([]);
onMounted(() => {
  getJXRY().then((e) => {
    option.series[0].data = e.data[0].data;
    sourceData.value = e.data;
  });
});
const btnArr = reactive([
  {
    text: "日",
    checked: true,
  },
  {
    text: "月",
    checked: false,
  },
  {
    text: "年",
    checked: false,
  },
]);
function btnFn(item) {
  // 将其他按钮设置成false
  btnArr.forEach((element) => {
    element.checked = false;
  });
  item.checked = true;
  for (let i = 0; i < sourceData.value.length; i++) {
    if (item.text == sourceData.value[i].type) {
      option.series[0].data = sourceData.value[i].data;
      break;
    }
  }
}

const option = reactive({
  grid: {
    bottom: "10%", //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        show: true,
      },
    },
  },
  xAxis: {
    data: ["蒙大矿业", "伊化矿业", "金通矿业", "南梁矿业", "葫芦素", "门克庆"],
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: "#01FCE3",
      },
    },
    axisTick: {
      show: true, //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#ebf8ac", //X轴文字颜色
      },
    },
  },
  yAxis: [
    {
      type: "value",
      name: "单位/人",
      nameTextStyle: {
        color: "#ebf8ac",
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ebf8ac",
        },
      },
    },

    {
      type: "value",
      gridIndex: 0,
      min: 50,
      max: 100,
      splitNumber: 8,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
        },
      },
    },
  ],
  series: [
    {
      name: "井下人员",
      type: "bar",
      barWidth: 15,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#00FFE3",
            },
            {
              offset: 1,
              color: "#4693EC",
            },
          ]),
        },
      },
      data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
    },
  ],
});
</script>
<style scoped>
.pbox {
  width: 100%;
  height: 35%;
}
.rightBtn {
  display: flex;
  gap: 10px;
}
.charts {
  width: 100%;
  height: 100%;
}
</style>
